<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">

<head>
	<title>About - sport activity</title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-7 pb-0">
	<div class="container-fluid pt-3 pt-xl-5">
		<div class="row">
			<div class="col-xxl-11 mx-auto">
				<div class="card h-300px h-md-400px h-xl-500px overflow-hidden" style="background: none center center / cover no-repeat; z-index: 0;" data-jarallax-original-styles="background:url(/img/about.jpg) no-repeat; background-size:cover; background-position:center;">
					<!-- background dark overlay -->
					<div class="bg-overlay bg-dark bg-opacity-50"></div>
					<!-- Title -->
					<div class="card-img-overlay d-flex align-items-center justify-content-center text-center z-index-2">
						<h1 class="display-4 text-white">We're Superheroes</h1>
					</div>
				<div id="jarallax-container-0" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: -100;"><div style="background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; background-image: url(&quot;https://mizzle.webestica.com/assets/images/bg/04.jpg&quot;); position: absolute; top: 0px; left: 0px; width: 1714.41px; height: 528.4px; overflow: hidden; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; margin-top: 21.3px; transform: translate3d(0px, -62.9px, 0px);"></div></div></div>
			</div>
		</div>
	</div>
</section>
<section>
	<div class="container">
		<div class="row g-4 g-sm-6">
			<!-- Team item -->
			<div class="col-sm-2 col-md-2 col-xl-2" th:each="user,userStat:${users}">
				<div class="card card-img-scale bg-transparent overflow-hidden">
					<div class="card-img-scale-wrapper rounded-3">
						<!-- Card Image -->              
						<img th:src="${user.img}" class="img-scale" alt="card image">
					</div>
					<!-- Card body -->
					<div class="card-body text-center px-0 pb-0">
						<h6 class="mb-0"><a class="stretched-link" th:text="${user.name}"></a></h6>
					</div>
				</div>
			</div>
 
		</div>
	</div>
</section>
	</div>
	<script layout:fragment="fragment_script">
		
	</script>
</body>
</html>